<template>
  <view class="notice-container">
    <view class="header">
      <view class="title">通知公告</view>
      <view class="subtitle">查看公司最新通知</view>
    </view>
    
    <view class="notice-list">
      <!-- 通知列表 -->
      <view 
        class="notice-item" 
        v-for="(item, index) in noticeList" 
        :key="index"
        @click="viewNoticeDetail(item)"
      >
        <view class="notice-type" :class="'type-' + item.type">{{ getTypeText(item.type) }}</view>
        <view class="notice-content">
          <view class="notice-title">{{ item.title }}</view>
          <view class="notice-summary">{{ item.summary }}</view>
          <view class="notice-footer">
            <text class="notice-time">{{ item.publishTime }}</text>
            <text class="notice-publisher">{{ item.publisher }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noticeList: [
        {
          id: '1',
          title: '关于公司年度体检安排的通知',
          summary: '为了保障全体员工的身体健康，公司将于下月组织年度体检，请各部门做好相关准备工作。',
          publishTime: '2025-11-15',
          publisher: '人力资源部',
          type: 1,
          content: '<p>尊敬的各位同事：</p><p>为了保障全体员工的身体健康，公司将于2025年12月1日至12月15日组织年度体检。</p><p><strong>体检时间安排如下：</strong></p><p>1. 技术部：12月1日-12月3日</p><p>2. 市场部：12月4日-12月6日</p><p>3. 行政部：12月7日-12月9日</p><p>4. 财务部：12月10日-12月12日</p><p>5. 其他部门：12月13日-12月15日</p><p>请各部门负责人做好相关安排，确保员工按时参加体检。体检地点为市中心医院体检中心，请携带工作证和身份证。</p><p>特此通知。</p>'
        },
        {
          id: '2',
          title: '2025年度员工表彰大会通知',
          summary: '公司将于本月25日举行年度员工表彰大会，表彰在过去一年中表现优秀的员工和团队。',
          publishTime: '2025-11-10',
          publisher: '行政办公室',
          type: 2,
          content: '<p>各部门、全体员工：</p><p>公司定于2025年11月25日下午14:00在公司大会议室举行"2025年度员工表彰大会"。</p><p><strong>会议议程：</strong></p><p>1. 总经理年度工作总结</p><p>2. 优秀员工及团队表彰</p><p>3. 2026年工作展望</p><p><strong>获奖名单将于会前公示，请各部门负责人通知所有员工准时参加。</strong></p><p>特此通知。</p>'
        },
        {
          id: '3',
          title: '关于调整工作时间的紧急通知',
          summary: '因市政工程施工，公司周边道路将进行为期一周的封闭维修，公司临时调整工作时间。',
          publishTime: '2025-11-05',
          publisher: '行政办公室',
          type: 3,
          content: '<p>尊敬的各位同事：</p><p>接市政工程部门通知，因道路维修工程，公司周边主要道路将于2025年11月7日至11月14日进行封闭施工。为减少员工通勤困难，经公司研究决定，在此期间临时调整工作时间如下：</p><p>1. 上午工作时间：9:30-12:00</p><p>2. 下午工作时间：13:30-18:00</p><p>3. 有条件的部门可安排员工远程办公</p><p>请各位同事相互转告，并提前规划出行路线。</p><p>特此通知。</p>'
        },
        {
          id: '4',
          title: '公司年会活动策划征集',
          summary: '为筹备2026年公司年会，现向全体员工征集年会活动创意和节目，欢迎踊跃参与。',
          publishTime: '2025-10-25',
          publisher: '企业文化部',
          type: 4,
          content: '<p>亲爱的同事们：</p><p>2025年即将过去，为了让我们的年会更加精彩纷呈，现向全体员工征集年会创意和节目！</p><p><strong>征集内容：</strong></p><p>1. 年会主题创意</p><p>2. 节目表演（个人或团队）</p><p>3. 互动游戏设计</p><p>4. 其他有趣的年会环节建议</p><p>请有兴趣参与的同事于11月30日前将创意方案或节目报名表发送至邮箱：culture@company.com</p><p>优秀创意将获得精美礼品，期待大家的积极参与！</p>'
        },
        {
          id: '5',
          title: '新版员工手册发布通知',
          summary: '公司新版员工手册已正式发布，请所有员工下载学习，并于本月底前完成相关考核。',
          publishTime: '2025-10-15',
          publisher: '人力资源部',
          type: 1,
          content: '<p>各位同事：</p><p>公司新版《员工手册》已正式发布，本次更新包含了公司最新的规章制度、福利政策以及职业发展通道等重要内容。</p><p>请所有员工在11月30日前完成以下工作：</p><p>1. 登录公司内网下载新版员工手册</p><p>2. 认真学习手册内容</p><p>3. 完成线上考核测试</p><p>4. 签署《员工手册知晓确认书》并交至人力资源部</p><p>新员工手册的学习和考核将作为年度绩效评估的一部分，请大家认真对待。</p><p>如有任何疑问，请联系人力资源部。</p>'
        }
      ]
    };
  },
  methods: {
    // 查看通知详情
    viewNoticeDetail(item) {
      // 跳转到详情页
      uni.navigateTo({
        url: `/pages/notice_detail/notice_detail?id=${item.id}`
      });
    },
    
    // 获取通知类型文本
    getTypeText(type) {
      const typeMap = {
        1: '通知',
        2: '公告',
        3: '紧急',
        4: '活动'
      };
      return typeMap[type] || '通知';
    }
  }
}
</script>

<style lang="scss">
.notice-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30rpx;
}

.header {
  background: linear-gradient(to right, #4f99ff, #6ba6ff);
  padding: 40rpx 30rpx 60rpx;
  color: #fff;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(79, 153, 255, 0.2);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 24rpx;
  opacity: 0.8;
}

.notice-list {
  padding: 30rpx;
}

.notice-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

.notice-type {
  display: inline-block;
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  margin-bottom: 16rpx;
}

.type-1 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.type-2 {
  background-color: #f6ffed;
  color: #52c41a;
}

.type-3 {
  background-color: #fff2e8;
  color: #fa8c16;
}

.type-4 {
  background-color: #f9f0ff;
  color: #722ed1;
}

.notice-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.notice-summary {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.notice-footer {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}
</style> 